<template>
       <page-view class="movie-page bg-gray-100">
              <title-bar>华夏影院<template #right><img src="../assets/img/menu.svg" @click="showLogin" /></template>
              </title-bar>
              <van-action-sheet :show="show" :actions="actions" cancel-text="取消" @cancel="onCancel"
                @select="onSelect" />
              <ul class="type-tag bg-white">
                     <li v-for="(item, index) in typeTagList" :key="index" @click="typeTagIndex = index"
                       :class="{ active: typeTagIndex == index }">
                            {{ item }}
                     </li>
                     <li class="right-search-icon">
                            <img src="../assets/img/search.svg" alt="" @click="$router.push({ name: 'search' })" />
                     </li>
              </ul>
              <div class="content-box">
                     <!-- 最受好评的电影 -->
                     <div class=" px-[10px] bg-white pb-[15px]">
                            <p class=" text-gray-500 text-[12px] py-[10px] ">最受好评的电影</p>
                            <div class="praise-list flex overflow-auto">
                                   <!-- 每一项电影信息 -->
                                   <div class="w-[90px] ml-[5px] praise-item flex-shrink-0"
                                     v-for="item in praiseMovieList" :key="item">
                                          <div class="h-[110px] relative ">
                                                 <img class="w-full h-full" :src="baseURL + item.movie_pc" alt="">
                                                 <p
                                                   class=" text-yellow-500 text-[12px] absolute bottom-[2px] left-[2px] font-bold">
                                                        观众评分 {{ item.movie_score }}
                                                 </p>
                                          </div>
                                          <p class="text-[12px] font-bold truncate py-[5px]">{{ item.movie_name }}</p>
                                   </div>
                            </div>
                     </div>
                     <!-- 热门电影列表 -->
                     <hotMovieList></hotMovieList>
              </div>
       </page-view>

</template>
<script setup>
import titleBar from "../components/title-bar.vue"
//ref用来定义常量，reactive用来定义对象
import { ref, reactive, inject } from "vue";
import API from "../utils/API/index";
import hotMovieList from "../components/hotMovieList.vue";
import { useRouter } from "vue-router";
const router = useRouter();
//定义一个数组
const typeTagList = reactive(["热映", "影院", "待映", "经典电影"]);
const typeTagIndex = ref(0);
const praiseMovieList = ref([]);
let baseURL = inject("baseURL");
const show = ref(false)
const actions = reactive([{ name: '登录账号' }])
const showLogin = () => {
       show.value = true
}
const onCancel = () => {
       show.value = false
}
const onSelect = (e) => {
       if (e.name = "登陆账号") {
              router.push({ name: "login" });
       }
}
API.movieInfo.getPraiseMovie().then(res => {
       if (res.status = "success") {
              praiseMovieList.value = res.data;
       } else {

       }
});
//获取电影列表
const queryParams = reactive({
       pageIndex: 1,
       tags: "",
       movie_name: ""
})
const movieList = ref([]);
API.movieInfo.getListByPage(queryParams).then(res => {
       if (res.status = "success") {
              movieList.value = res.data.listData
       }
});

</script>
<style lang="scss" scoped>
@import "../assets/scss/comm.scss";

.type-tag {
       height: 45px;
       border-bottom: 1px solid lightgray;
       display: flex;
       list-style-type: none;

       li {
              padding: 0 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-weight: bold;
              color: #666666;
              font-size: 14px;
              position: relative;

              &.active {
                     font-size: 17px;
                     color: #333333;

                     &::after {
                            content: "";
                            height: 2px;
                            background-color: $primaryColor ;
                            width: 20px;
                            position: absolute;
                            bottom: 2px;
                     }
              }
       }

       position: relative;

       .right-search-icon {
              position: absolute;
              right: 5px;
              height: 100%;

              img {
                     width: 25px;
                     height: 25px;
              }
       }
}

.movie-page {
       display: flex;
       flex-direction: column;
}

.content-box {
       flex: 1;
       overflow: auto;

       .praise-list {
              &::-webkit-scrollbar {
                     display: none;
              }

              // .praise-item:not(:first-child){
              //        margin-left: 10px;
              // }
              .praise-item+.praise-item {
                     margin-left: 10px;
              }
       }

}
</style>